<template>
	<view class="content">
		<view class="blod-text">校园活动类型</view>
		<!-- 校园活动选择 -->
		<scroll-view scroll-x="true" class="nav-scroll mt-30">
			<view v-for="(item, index) in navItems" :key="index" class="nav-item mr-30" :class="{ active: item.active }"
				@click="handleItemClick(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<view class="activity-content mt-30" v-for="(item, index) in choose_list" :key="index">
			<!-- 基础信息，包含头像以及姓名学校等 -->
			<view class="flex-space">
				<view class="flex">
					<view class="user-icon">
						<image :src="item.user_img" mode="aspectFill" class="img"></image>
					</view>
					<view class="infon-box ml-10">
						<view class="user-name">{{item.name}}</view>
						<view class="tips-text mt-10">{{item.school}}</view>
					</view>
				</view>
				<view class="time-text a-center">{{item.time}}</view>
			</view>
			<!-- 活动标题 -->
			<view class="blod-text mt-10" @click="gotoDetails(item)">{{item.title}}</view>
			<!-- 活动内容 -->
			<view class="content-text mt-10 text-overflow-3" @click="gotoDetails(item)">{{item.content}}</view>
			<!-- 活动时间 -->
			<view class="mt-30 time-text"  @click="gotoDetails(item)">活动时间：{{item.activity_timeStr}}</view>
			<!-- 报名截止时间 -->
			<view class="mt-10 time-text"  @click="gotoDetails(item)">报名截止时间：{{item.close_timeStr}}</view>
			<!-- 内容标签以及状态 -->
			<view class="flex-space mt-30">
				<!-- <view class="label-text">{{item.category}}</view> -->
				<uv-tags :text="item.type" size="mini"></uv-tags>
				<view class="flex">
					<uv-icon size="23" name="more-circle" color="primary"></uv-icon>
					<view class="blue-text ml-10">评论 {{item.number_comments}}</view>
					<uv-icon size="23" name="thumb-up" v-if="!item.is_like" @click="isLike(item)"
						color="primary"></uv-icon>
					<uv-icon size="23" name="thumb-up-fill" v-if="item.is_like" @click="isLike(item)"
						color="primary"></uv-icon>
					<view class="blue-text ml-10" @click="isLike(item)">{{item.num_likes}}</view>
				</view>
			</view>
		</view>
	</view>
	<uv-toast ref="toast"></uv-toast>
	<view class="mask-login" @click="checkLoginStatus" v-show="!is_login"></view>
	<!-- 提示登录 -->
	<uv-overlay :show="show_login" @click="show_login = false">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="blod-text">检测到还未登录</view>
				<div class="mt-30">
					<uv-button type="primary" text="现在登录" @click="gotoLogin"></uv-button>
				</div>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	import {
		formatDateTime
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				navItems: [{
						name: '全部',
						active: true
					},
					{
						name: '校内活动'
					},
					{
						name: '校外活动'
					},
				],
				content_list: [],
				choose_list: [],
				is_login: false, // 检查登录状态
				show_login: false, // 提示登录
			}
		},
		methods: {
			formatDateTime,
			handleItemClick(index) {
				this.navItems.forEach((item, i) => {
					item.active = i === index;
				});
				// 根据选中的标签过滤 content_list
				const selectedCategory = this.navItems[index].name;
				this.getArticles(selectedCategory)
			},
			// 获取文章
			async getArticles(postType){
				const user_info = uni.getStorageSync('user_info')
				const db = uniCloud.database();
				const collection = db.collection('schoolActivity')
				// 判断要获取的分类，如果是全部就获取全部
				if(postType === '全部'){
					const res = await collection.get()
					if(res && res.success){
						this.choose_list = res.result.data
						// 处理每篇文章的时间显示,点赞数量显示
						this.choose_list = this.choose_list.map(item => ({
							...item,
							time: this.formatDateTime(item.createTime),
							num_likes:item.number_likes,
						}))
						for (let i = 0; i < this.choose_list.length; i++) {
							for(let j = 0; j < this.choose_list[i].user_likes_list.length; j++){
								if (this.choose_list[i].user_likes_list[j] === user_info._id) {
								    this.choose_list[i].is_like=true
									break
								}else{
									this.choose_list[i].is_like=false
								}
							}
						}
					}
					return
				}
				const res = await collection.where({
					type:postType
				}).get()
				if(res && res.success){
					this.choose_list = res.result.data
					this.choose_list = this.choose_list.map(item => ({
						...item,
						time: this.formatDateTime(item.createTime),
						num_likes:item.number_likes,
					}))
					for (let i = 0; i < this.choose_list.length; i++) {
						for(let j = 0; j < this.choose_list[i].user_likes_list.length; j++){
							if (this.choose_list[i].user_likes_list[j] === user_info._id) {
							    this.choose_list[i].is_like=true
								break
							}else{
								this.choose_list[i].is_like=false
							}
						}
					}
				}
			},
			gotoDetails(item) {
				uni.navigateTo({
					url: `/pages/acticity/schoolActivity/schoolActivity?data=${item._id}`
				})
			},
			// 点赞数变更
			async update_likes_num(item,num_likes,bool){
				const user_info = uni.getStorageSync('user_info')
				// 判断是点赞还是取消点赞
				if(bool){
					item.user_likes_list.push(user_info._id)
				}else{
					const index = item.user_likes_list.indexOf(user_info._id)
					item.user_likes_list.splice(index,1)
				}
				const db = uniCloud.database();
				const collection = db.collection('schoolActivity')
				const res = await collection.where({
					_id:item._id
				}).update({
					number_likes:num_likes,
					user_likes_list:item.user_likes_list
				})
			},
			// 点赞
			isLike(item) {
				if (item.is_like) {
					item.num_likes = item.num_likes - 1
					this.update_likes_num(item,item.num_likes,false)
					this.$refs.toast.show({
						type: 'warning',
						message: "取消点赞成功"
					})
				} else {
					item.num_likes = item.num_likes + 1
					this.update_likes_num(item,item.num_likes,true)
					this.$refs.toast.show({
						type: 'success',
						message: "点赞成功"
					})
				}
				item.is_like = !item.is_like
			},
			checkLoginStatus() {
				// 从本地缓存获取登录状态
				const loginStatus = uni.getStorageSync('is_login');
				// login不存在或者为false就是没登录
				if (loginStatus === false || loginStatus === "") {
					// 检测到还没登录
					this.show_login = true
				} else {
					this.is_login = true
				}
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				this.show_login = false
			}
		},
		async onLoad() {
			const loginStatus = uni.getStorageSync('is_login')
			if (loginStatus === true) {
				this.is_login = true
			}
			await this.getArticles('全部')
		}
	}
</script>

<style scoped>
	.content {
		padding: 30rpx;
	}

	.nav-scroll {
		white-space: nowrap;
		overflow: hidden;
	}

	.nav-item {
		display: inline-block;
		padding: 10rpx;
		font-size: 26rpx;
		background-color: #ebebeb;
		cursor: pointer;
	}

	.nav-item.active {
		background-color: #ff9800;
		color: #fff;
	}

	.user-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		background-color: skyblue;
	}

	.user-name {
		font-size: 26rpx;
	}

	.content-text {
		font-size: 28rpx;
		font-weight: 400;
	}

	.label-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #666;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		padding: 30rpx;
		background-color: #fff;
	}
	
	.mask-login {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: (0, 0, 0, 0);
	}
</style>